<template>
	<view>
		<view class="main">
			<view class="list" v-for="(item,index) in 2" :class="current==index?'border':''" @click="current=index">
				<view class="head">
					<view class="image">
						<view class="box">
							许
						</view>
					</view>
					<view class="text">
						<view class="txt">
							<view class="name">
								<text> 张三</text>
								<text class="cell">
									13788889999
								</text>
							</view>
						</view>
						<view class="sapn">
							默认
						</view>
						<view class="address">
							上海市 徐汇区 世纪大道 xxxx
						</view>
					</view>
					<!-- 编辑 -->
					<view class="set">
						<view class="_image">
							<image class="img" src="../../static/shop/iconSet.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="left">
						<view class="icon">
							<u-radio-group @change="radioGroupChange">
								<u-radio @change="radioChange" :name="1"></u-radio>
							</u-radio-group>
						</view>
						<view class="">
							默认地址
						</view>
					</view>
					<view class="right">
						删除
					</view>
				</view>
			</view>
			<!-- 添加 -->
			<view class="add">

				<text>+ 添加地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '', //当前选择地址
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.border {
		border: 1rpx solid #FB9C00 !important;

	}

	.main {
		margin-top: 30rpx;

		.list {
			width: 90%;
			margin: 30rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid rgba(0, 0, 0, .0);

			.head {
				display: flex;
				padding: 10rpx 10rpx 20rpx 10rpx;
				border-bottom: 3rpx solid #cfcfcf;

				.image {
					width: 15%;
					height: 20rpx;
					margin: 25rpx 10rpx 20rpx 20rpx;

					.box {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50rpx;
						background-color: pink;
						line-height: 70rpx;
						text-align: center;
						color: #ff007f;
					}
				}

				.text {
					width: 70%;

					.txt {

						.name {
							font-size: 34rpx;
						}

						.cell {
							font-size: 22rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}

					.sapn {
						color: #FB9C00;
						font-weight: 550;
					}

				}

				.set {
					width: 10%;
					line-height: 150rpx;

					._image {
						align-items: center;
						width: 50rpx;
						height: 50rpx;
					}
				}

			}

			.footer {
				display: flex;
				justify-content: space-between;
				width: 90%;
				height: 80rpx;
				line-height: 80rpx;
				margin: auto;
				font-size: 22rpx;
				color: #999;

				.left {
					display: flex;
					margin: 0;
				}
			}


		}

		.add {
			width: 90%;
			margin: auto;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color:#FB9C00 ;
			color: #fff;
			border-radius: 25rpx;
		}


	}
</style>
